<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" slick-uniqueid="1">
<head>
	<jdoc:include type="head" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>rank.com.sg</title>
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/rank/css/style.css">
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/rank/css/rank.css">
	<link href="<?php echo $this->baseurl ?>/templates/rank/css/humanity/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" media="screen" />
	<script type="text/javascript" language="javascript" src="<?php echo $this->baseurl ?>/templates/rank/js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" language="javascript" src="<?php echo $this->baseurl ?>/templates/rank/js/jquery-ui-1.8.16.custom.min.js"></script>	
	<script type="text/javascript" language="javascript" src="<?php echo $this->baseurl ?>/templates/rank/js/jquery.carouFredSel-6.1.0.js"></script>

	<script type="text/javascript">
		$(function(){
		
			$('.box').bind({
				mouseover: function(){
					$(this).addClass('hover');
				},
				mouseout: function(){
					$(this).removeClass('hover');
				}
			});
		
			$('.blocks ul').after('<div class="block-content"></div>');
			$('.blocks li').each(function(){
				if($(this).attr('class')=='active'){
					$('.block-content').html($('a',this).next().html());
				}
			});
			$('.blocks ul a').click(function(e){
				e.preventDefault();
				$(this).parent().addClass('active').siblings().removeClass('active');
				$('.block-content').html($(this).next().html());
			});
			
				$('#foo2').carouFredSel({
					auto: true,
					prev: ".prev",
					next: ".next",
					items				: 2,
					direction			: "left",
					scroll : {
						items			: 2,
						effect			: "easeOutBounce",
						duration		: 1000,							
						pauseOnHover	: true
					}
				});
				
			//Box hover			
			$here = 0;
			$speed = 5000;
			$timeout = 0;
			function hover(){
				if($here == $eles.length-1){
					$here = 0;
					
				}else{
					$here++;
				}
				
				if($here != 0){
					$($eles[$here-1]).removeClass('hover');
				}else{
					$($eles[$eles.length-1]).removeClass('hover');
				}
				$($eles[$here]).addClass('hover');
				
				$timeout = setTimeout(hover,5500);
			}
			$(document).ready(function() {
				$eles = $('.box');
				if($here == 0){
					$($eles[$here]).addClass('hover');
				}
				$timeout = setTimeout(hover,$speed);
				$eles.bind({
						mouseover: function(){
							$($eles[$here]).removeClass('hover');
							$(this).addClass('hover');
							clearTimeout($timeout);
						},
						mouseout: function(){
							$(this).removeClass('hover');
							$($eles[$here]).addClass('hover');
							$timeout = setTimeout(hover,$speed);
						}
					});
			});
				
		});
	</script>
  <script>
  jQuery(document).ready(function($) {
    var formxx = "#contactform";
  
    $(formxx).submit(function() {
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      url = $(this).attr( 'action' );
      
      $(formxx+' #component29').css("display", "none");
      $(formxx+' #component30').css("display", "none");
      $(formxx+' #component31').css("display", "none");
      $(formxx+' #component32').css("display", "none");
      
      //Kiem tra noi dung input
      if($(formxx+' #Email').val()=="" || !emailReg.test($(formxx+' #Email').val()) || $(formxx+' #Name').val()=="" || $(formxx+' #Phone').val()=="" || $(formxx+' #Message').val()=="" )
      {
        if($(formxx+' #Email').val()=="")    
        {
			$(formxx+' #component30').css("display", "block");
        }
        if(!emailReg.test($(formxx+' #Email').val()))    
        {
			$(formxx+' #component30').css("display", "block");
        }
        if($(formxx+' #Name').val()=="")    
        {
			//alert($(formxx+' #component29').html()); 
			$(formxx+' #component29').css("display", "block");
        }
        if($(formxx+' #Phone').val()=="")    
        {       
			$(formxx+' #component31').css("display", "block");
        }
        if($(formxx+' #Message').val()=="")    
        {
			$(formxx+' #component32').css("display", "block");
        }
      }
      else
      {        
        
        // Cho hien dialog thong bao cho
        $('#dialog-message ').html('<div style="padding: 0  20px; text-align: center; font-size:12px"><img style="margin: 0 auto" src="/templates/rank/images/ajax-loading.gif" /><br /><p>Message is sending...!</p></div>');
        $( "#dialog:ui-dialog" ).dialog( "destroy" );  
        $( "#dialog-message" ).dialog({
          modal: true,
          buttons: {
            Ok: function() {
            $( this ).dialog( "close" );
          }
          }
        });    
        
        // Gui noi dung de xu ly
        $.ajax({
            type: 'POST',
            url: url,
            data: $(this).serialize(),
            success: function(data) {            
              
                // Cho hien dialog thanh cong
                $('#dialog-message ').html('<div style="padding: 0  20px; text-align: center; font-size:12px"><p>Thank you for your enquiry. A member of staff will contact you shortly.</p></div>');
                $( "#dialog:ui-dialog" ).dialog( "destroy" );
              
                $( "#dialog-message" ).dialog({
                  modal: true,
                  buttons: {
                    Ok: function() {
                      $( this ).dialog( "close" );
                    }
                  }
                });
                
                //Reset all input in form
                $(formxx).each(function(){this.reset();});
              
              }
              
          });        
      }
      return false;
  });

});
</script>
</head>
<body>
<div id="dialog-message"></div>
<div id="content" class="">
	<div id="wrapper">
		<div id="header" class="ofh bdb">			
			<jdoc:include type="modules" name="header" />		
		</div>	
			
		<div class="por <?php if(JRequest::getVar('Itemid')!='101' && JRequest::getVar('Itemid')!='162') { echo 'innerpage';} else { echo 'banner'; }?> ">
			
				<jdoc:include type="modules" name="banner" style="banner" />	
						
			<div class="w960 por mha">
				<jdoc:include type="modules" name="textbanner" style="" />	
			</div>
		</div><!--banner-->

		<jdoc:include type="modules" name="middle" />		
		<div id="container" class="taj w960 mha <?php if(JRequest::getVar('Itemid')!='101') { echo 'innerpages';}?>">
			<jdoc:include type="component" />
		</div>	<!--container-->
		
		<div class="clear"></div>

		<div id="footer">
			<div id="ftcontent" class="w960 mha">
					<jdoc:include type="modules" name="ftcontent" />	



					
			</div>
			<div class="clear"></div>
			<div id="ftcopy">
				<div class="w960 mha">
					<jdoc:include type="modules" name="footer" />		

					<div class="smapp">
						<p class="cf1 fs12">©2013 rank.com.sg. all rights reserved.  
						<jdoc:include type="modules" name="sitemap" />	</p>
					</div>
				</div>
			</div>
		</div><!--#footer-->	
	</div><!--end wrapper-->
</div><!--content-->
</body>
</html>